前言：如果動畫是一道菜，Easing 就是靈魂醬汁

經過前三天非常入門的 Tween、Timeline 介紹，今天想分享的主題是 Easing！
那為什麼會說 Easing 是動畫的精髓呢？
相信看過鬼片的大家，大多時候會被突然從某處冒出的鬼嚇到，但是，假設有部鬼片，鬼從視線可及的角落冒出身子，並且以等速移動的方式緩緩向你靠近，這樣的鬼跟被放在 Costco 結帳輸送帶上，並等速朝收銀機靠近的商品有什麼區別？鬼片直接變闔家觀賞的普遍級啦 >“<
總結來說，動畫之所以好看，其中一個特點是，播放的節奏調配得恰到好處。

Easing

不確定 Easing 中文準確翻成什麼比較合適，但想藉由以下簡單的小例子帶出 ：

1. Easing
2. Ease
3. 屬性類別（e.g. power1）

如果說到「咖啡」，大家的直覺可能會是它嚐起來的味道，還有它是一種用咖啡豆做出來的飲料，但對於沒有喝過咖啡的人，你會怎麼向他介紹咖啡呢？
比較快的方式，或許是直接拉著這個人到便利商店，指著咖啡機說：「你看！這就是可以做出咖啡的機器，我請你喝一杯吧！」

Easing 就像咖啡的「概念」（但非單一的物件），是描述動畫快與慢變化的方式；而 Ease 就是實際程式裡的屬性名稱，好比咖啡機上的按鈕，按下去就能做出對應的咖啡，簡單範例如下：

<div class="ghost"> 👻 </div>

<script>
gsap.to(".ghost", { x: 500, duration: 1, ease: "power4.Out" });//讓鬼片的鬼恐怖起來！
</script>

Ease 可以搭配不同的類別（例如：power1、back、bounce），就像咖啡機上的不同品項按鈕，選擇哪一個取決於你想要的動畫效果。

最後，非常推薦大家去 GSAP 官網的 Ease Visualizer 玩玩看，也會對於屬性類別更有印象！

後記

馬拉松第四天，竟然有點氣喘吁吁了，我要加油ＱＱ
預計下週開始會帶入比較多實作的部分（希望）